<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>全局注册</title>
</head>
<body>
<div id="app">
  <h3>购物车</h3>
  <product-item
    v-for="product in products"
    :key="product.id"
    :title="product.title"
    @count-change="totalCount++"
  ></product-item>
  <h4>商品总个数为:{{totalCount}}</h4>
</div>

<script src="../vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data(){
      return{
        products: [
          {id: 1, title: '苹果一斤'},
          {id: 2, title: '香蕉一根'},
          {id: 3, title: '橙子一个'},
        ],
        totalCount: 0
      }
    }
  });
  app.component('productItem', {
    data(){return {count: 0}},
    props: ['title'],
    template: `
      <div>
      <span>商品名称: {{title}}, 商品个数: {{count}}</span>
      <button @click="countIns">+1</button>
      </div>
    `,
    methods: {
      countIns(){
        this.$emit('count-change')
        this.count++
      }
    }
  })
  const vm = app.mount('#app')
</script>
</body>
</html>
